*{
    font-family:"Microsoft YaHei";
}
*{
    -webkit-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
/*response tool start*/
.row::after,.row::before{
    content: '';
    clear: both;
    display: table;
}
.col{float:left}
.l1{  width:8.33%;}
.l2{  width:16.66%;}
.l3{  width:25%;}
.l4{  width:33.33%;}
.l5{  width:41.66%;}
.l6{  width:50%;}
.l7{  width:58.33%;}
.l8{  width:66.66%;}
.l9{  width:75%;}
.l10{  width:83.33%;}
.l11{  width:91.66%;}
.l12{  width:100%;}
@media only screen and (max-width: 600px){
    .s1{  width:8.33%;}
    .s2{  width:16.66%;}
    .s3{  width:25%;}
    .s4{  width:33.33%;}
    .s5{  width:41.66%;}
    .s6{  width:50%;}
    .s7{  width:58.33%;}
    .s8{  width:66.66%;}
    .s9{  width:75%;}
    .s10{  width:83.33%;}
    .s11{  width:91.66%;}
    .s12{  width:100%;}
}
@media only screen and (min-width: 601px){
    .m1{  width:8.33%;}
    .m2{  width:16.66%;}
    .m3{  width:25%;}
    .m4{  width:33.33%;}
    .m5{  width:41.66%;}
    .m6{  width:50%;}
    .m7{  width:58.33%;}
    .m8{  width:66.66%;}
    .m9{  width:75%;}
    .m10{  width:83.33%;}
    .m11{  width:91.66%;}
    .m12{  width:100%;}
}
/*response tool end*/
/*左边*/
.left{
    position: fixed;
    left: 0;
    top:0;
    bottom:0;
    /*top bottom 为0 充满整个屏幕*/
    width:40%;
}
.bgimg{
    background: url("https://images.unsplash.com/photo-1507416805518-06028e2e9483?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=ac378b9781d94950d3db09ae68c6b7df&auto=format&fit=crop&w=500&q=60") center no-repeat;
    background-size: cover;
    min-height:100%;
}
/*右边*/
.right{
    margin-left:40%;
}
.header{
    padding:220px 16px;
    text-align: center;
}
.title{font-size: 48px;letter-spacing:4px;}
.sub{font-size: 12px;letter-spacing: 4px;color: #666;}
.button{
    text-decoration: none;
    border:none;
    padding:12px 24px;
    margin:10px;
    font-size: 14px;
    color: #000;
    letter-spacing: 2px;
    background-color: #ccd5e5;
    display: inline-block;
}
.button:hover{
    box-shadow: 0 4px 10px #8bcbff;
}
.photos{
    pading:24px 16px;
}
img{
    width:100%;
    height:auto;
    padding:8px;
}
/*about*/
.about{
    paddig:24px;
}
.about h3{color: #666;
    padding:0px 10px;}
hr{
    border:none;
    border-bottom: 1px solid #eee;
    margin:16px 0;
}
.info{
    color:#666;
    font-size: 14px;
    letter-spacing:2px;
    line-height: 2;
    text-indent: 32px;
}
@media only screen and (max-width: 768px) {
    .left{
        display: none;}
    .right{
        margin-left:0;
    }
}